/* Image Gallery Styles */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 240px);
  grid-gap: 40px;
  justify-content: center;
  margin: 0 auto;
}

.image-gallery a {
  display: block;
  width: 220px;
  height: 250px;
}
.image-gallery a img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 20px;
}

.image-gallery a .ai-style-change-9,
.image-gallery a .ai-style-change-10,
.image-gallery a .ai-style-change-11,
.image-gallery a .ai-style-change-12,
.image-gallery a .ai-style-change-13,
.image-gallery a .ai-style-change-14,
.image-gallery a .ai-style-change-15,
.image-gallery a .ai-style-change-16 {
  padding: 10px;
  background-color: #b8b8b8e7;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(230, 30, 30, 0.993);
  color: #000000;
}

.image-gallery a:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(252, 252, 252, 0.87);
}

/* General Styles */

.text-center {
  text-align: center;
}

body {
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu.open {
  display: block;
}

.dropdown-toggle .arrow {
  transition: transform 0.2s ease-in-out;
  color: #007bff; /* Change the color of the arrow to blue */
  text-shadow: 0 0 10px rgba(12, 210, 224, 0.966); /* Add a shadow effect to the arrow */
  transform: rotate(0deg);
}

.dropdown-toggle.open .arrow {
  transform: rotate(180deg);
  color: #a30909ef; /* Change the color of the arrow to pink when the dropdown is open */
  box-shadow: 0 0 10px rgb(74, 226, 28); /* Add a box shadow effect to the arrow when the dropdown is open */
}

.dropdown-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-toggle .arrow::before {
  content: "\25BC"; /* Change the arrow symbol to a downwards pointing triangle */
}

.dropdown-menu:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border-bottom: 10px solid #000;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: rotate(0deg);
  transition: transform 0.2s ease-in-out;
}

.dropdown-menu.show:before {
  transform: rotate(180deg);
}

.dropdown-toggle.open .arrow {
  transform: rotate(180deg);
  color: #a30909ef; /* Change the color of the arrow to pink when the dropdown is open */
  box-shadow: 0 0 10px rgb(74, 226, 28); /* Add a box shadow effect to the arrow when the dropdown is open */
}

.image-gallery img {
  border: 0.5px solid #0dca1d;
  box-shadow: 0 0 5px rgb(228, 4, 4);
  border-radius: 5px;
  padding: 5px;
  background-color: #0dca1d;
  box-shadow: 0 0 5px rgb(243, 5, 5), 0 0 5px rgb(243, 3, 3);
  filter: drop-shadow(0 0 5px rgba(243, 2, 2, 0.959)) drop-shadow(0 0 5px rgb(238, 14, 14));
  margin-bottom: 30px; /* Add a margin to the bottom of the image */
}

.page-border {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #50db26;
  z-index: -1;
}

footer {
  padding: 0 0 20px 0; /* add padding only to the bottom of the footer */
}

/* side nav bar styles */
.banner-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000; 
}

.sidebar-toggle {
 position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: left 0.3s ease-in-out;
}

.sidebar-toggle.open {
  left: 250px;
}

.title h1 {
  font-size: 30px;
  color: #00698f;
  font-weight: bold;
  text-decoration: underline #3b0c86;
  text-shadow: 2px 2px 4px #3b0c86;
  text-align: center;
  margin: 0 auto;
}

.search-bar {
  margin-right: 50px;
}

.search-bar input {
  width: 200px;
  height: 30px;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
}

.sidebar-toggle-button {
  background-color: #333;
  color: #37c41bdc;
  border: none;
  padding: 10px;
  font-size: 25px;
  cursor: pointer;
}

.sidebar-toggle-button:hover {
  background-color: #0f6d8a;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100vh;
  background-color: #ffffff;
  transition: left 0.3s ease-in-out;
  z-index: 1001; /* Add this line */
  overflow-y: auto; /* Add this line */
}

.sidebar.open {
  left: 0;
}

.sidebar-toggle.open {
  left: 250px;
}

.sidebar nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar nav ul li {
  margin-bottom: 10px !important;
  padding: 10px;
  border-bottom: 3px solid #333;
}

.sidebar nav a {
  color: #389c0a;
  text-decoration: none;
  display: block;
}

.sidebar nav a:hover {
  background-color: #6b0e0e;
}

.dropdown-toggle {
  cursor: pointer;
  display: block;
}

.dropdown-menu {
  visibility: hidden;
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000000;
  padding: 10px;
  border: 3px solid #2e9c24;
}

.dropdown-menu li {
  margin-bottom: 10px;
}

.dropdown-menu a {
  color: #ffffff;
  text-decoration: none;
  padding: 5px 10px;
  display: block;
}

.dropdown-menu a:hover {
  background-color: #444;
}

.sidebar.open .dropdown-menu {
  visibility: visible;
}

p {
  padding-top: 40px;
}

.sidebar-toggle-button .menu-text {
  display: block;
  font-size: 15px;
  text-align: center;
  margin-top: 5px;
}

.no-results-message {
  font-size: 18px;
  font-weight: bold;
  color: #3ac71e;
  padding: 20px;
  border: 3px solid #be1010;
  border-radius: 10px;
  background: #f9f9f9;
  text-align: center;
}

p {
  padding-bottom: 20px;
}

.banner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20px;
  width: 100%;
  height: 30px;
  padding: 20px;
  border: 1px solid #333;
  background-color: #333;
  color: #00698f;
  font-weight: bold;
  text-decoration: underline #3b0c86;
  text-shadow: 2px 2px 4px #3b0c86;
  font-size: 30px;
  font-family: Arial, sans-serif;
  text-align: center;
}

.text-box {
  flex: 1;
  text-align: center;
  margin: 0 20px;
}

.sidebar-toggle {
  margin-right: 20px;
}

.background-image {
    background-image: url('../../images/tv and movie lists/icon.png');
    background-size: cover;
    background-repeat: no-repeat;
}